<template>
  <div class="view-container animate__animated animate__fadeInDown">

    <div class="title-box">
      <h1 class="view-title">用户列表</h1>
      <div class="pagination-flag">
        <label>单页时不显示分页：</label>
        <el-switch v-model="hideFlag" />
      </div>
    </div>

    <div class="table-container">
      <el-table :data="tableData">
        <el-table-column fixed prop="userid" label="用户名" width="auto" />
        <el-table-column prop="name" label="姓名" width="auto" />
        <el-table-column prop="gender" label="性别" width="auto" />
        <el-table-column prop="role" label="角色" width="auto" >
          <template #default="scope">
            <el-tag>{{ scope.row.roleName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="auto">
          <template #default="scope">
            <div class="table-button-group">
              <el-button type="primary" size="small" @click="handleDetail(scope.$index, scope.row)" class="table-button">
                详情
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-class">
        <el-pagination
                       :hide-on-single-page="hideFlag"
                       v-model:current-page="currentPage"
                       v-model:page-size="pageSize"
                       :page-sizes="[10, 20, 30, 40, 50]"
                       background
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import router from "@/router/index.js";
import { getUserPage } from "@/api/userApi/userApi.js";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";

/*-------------定义变量开始--------------*/
const searchData = reactive({
  page: 0,
  limit: 10,
});
//只有单页时是否隐藏分页
const hideFlag = ref(false)
//当前页码
const currentPage = ref(1);
//每页条数
const pageSize = ref(10);
//数据总条数
  const total = ref(30);
//表格数据
const tableData = ref([]);

/*-------------定义变量结束--------------*/

/*-------------页面挂载开始--------------*/
onMounted(() => {
  getUserPage(searchData).then(res => {
    if(res.status === 200){
      //查询成功
      tableData.value = res.data.pageList;
      tableData.value.forEach(value => {
        switch (value.role){
          case 0:
            value.roleName = "管理员"
            break
          case 1:
            value.roleName = "领导"
            break
          case 2:
            value.roleName = "辅导员"
            break
          case 3:
            value.roleName = "学生"
            break
          default:
            value.roleName = "新生"
        }
      })
      total.value = res.data.total;
    }
  }).catch(() => {
    ElMessage("查询失败")
  })
})
/*-------------页面挂载结束--------------*/

/*-------------定义函数开始--------------*/
//查询学生
const searchUser = () => {
  //加入页码
  searchData.page = currentPage.value;
  //加入每页条数
  searchData.limit = pageSize.value;
  //请求接口
  getUserPage(searchData).then(res => {
    if(res.status === 200){
      //查询成功
      tableData.value = res.data.pageList;
      tableData.value.forEach(value => {
        switch (value.role){
          case 0:
            value.roleName = "管理员"
            break
          case 1:
            value.roleName = "领导"
            break
          case 2:
            value.roleName = "辅导员"
            break
          case 3:
            value.roleName = "学生"
            break
          default:
            value.roleName = "新生"
        }
      })
      total.value = res.data.total;
    }
  }).catch(() => {
      ElMessage("查询失败")
  })
}
//删除按钮点击事件
const handleDetail = (index, row) => {
  router.push("/userManage/userDetail/"+row.userid)
}
//切换每页条数触发的事件
const handleSizeChange = (val) => {
  pageSize.value = val;
  searchUser();
}
//切换页码的时候触发的事件
const handleCurrentChange = (val) => {
  currentPage.value = val;
  searchUser();
}
/*-------------定义函数结束--------------*/


</script>

<style scoped>
.view-container{
  padding-top: 40px;
  width: 80%;
  overflow: hidden;
  animation-duration: 0.5s;
}
.view-title{
  font-size: 40px;
  font-weight: bolder;
  margin-bottom: 30px;
}
.pagination-flag{
  float: right;
}
.table-button-group{
  display: flex;
  align-items: center;
}
.table-button{
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 3px;
  padding: 0;
  width: 70px;
}
.page-class{
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}

</style>
